<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1_angular初识</title>
    <script src="./lib/angularjs.js"></script>
</head>

<body>
    <div ng-app="box" ng-controller="box_crtl">
        <h1>{{projectName}}</h1>
        <h2 ng-bind="say"></h2>
        <input type="text" ng-model="say">
        <div ng-app="" ng-init="myText='Hello World！'; text='World！'">
            <h1>{{myText}}</h1>
            <h2>{{text}}</h2>
            <h3 ng-bind="myText"></h3>
            <h4 ng-bind="text"></h4>
        </div>
    </div>
</body>
<script>
    // ng-app创建一个模块
    const m = angular.module("box", [])
    console.log(m)
    m.controller("box_crtl", ["$scope", function ($scope) {
        // 在标签中直接通过双花括号引用数据
        $scope.projectName = '换项目到了，要学习angular了';

        // 或者通过ng-bind来将数据绑定到对应的标签
        $scope.say = '随便说说'

        // 关于ng-model，还在继续学习中...
    }])
</script>

</html>